<template>
  <section class="component message-send-relation">
    <relation-checkbox v-model="checkedRelation"></relation-checkbox>

    <div class="operate-buttons">
      <el-button @click="updateRelationState(false), checkedRelation = []">取消</el-button>
      <el-button @click="submit">下一步</el-button>
    </div>

    <!-- 联系人列表,短信模板选择 -->
    <el-dialog :visible.sync="dialog.messageSendList" append-to-body @open="$nextTick(() => $refs['message-send-list'].refreshData())">
      <message-send-list ref="message-send-list" :sendTarget="sendTarget" @on-back="dialog.messageSendList = false" 
        @on-close="updateRelationState(false), dialog.messageSendList = false, checkedRelation = []">
      </message-send-list>
    </el-dialog>
  </section>
</template>


<script lang="ts">
import Vue from 'vue'
import Component from 'vue-class-component';
import { Dependencies } from '~/core/decorator';
import { Emit, Prop, Model} from 'vue-property-decorator';
import { State, namespace } from "vuex-class";
import RelationCheckbox from '~/components/smart-collection/message-collection/relation-checkbox.vue';
import MessageSendList from '~/components/smart-collection/message-collection/message-send-list.vue';

const MessageCollectionModule = namespace('message-collection')

@Component({
  components: {
    RelationCheckbox,
    MessageSendList
  }
})
export default class MessageSendRelation extends Vue {
  @MessageCollectionModule.Action
  private updateRelationState
  @MessageCollectionModule.Action
  private updateCheckRelation

  private checkedRelation: any[] = []

  private dialog: any = {
    messageSendList: false,
  }

  private get sendTarget() {
    return this.checkedRelation
  }

  private submit() {
    if (this.checkedRelation.length === 0) {
      this.$message.warning('请先选择发送对象')
      return
    }
    this.updateCheckRelation(this.checkedRelation)
    this.dialog.messageSendList = true
  }

}
</script>

